import React, { PureComponent } from 'react';
import { Form, Input, Button, Select, Divider, Spin } from 'antd';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import styles from './style.less';

const { Option } = Select;

@connect(state => ({
  ...state.assetTypeList,
}))
@Form.create()
export default class Step1 extends PureComponent {
  // get type list for asset choosing
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'assetTypeList/fetchList',
    });
  }
  // validate form data is ok
  onValidateForm = () => {
    const { dispatch, form } = this.props;
    const { validateFields } = form;

    validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'assetEntity/saveStepFormData',
          payload: {
            step1: values,
          },
        });
        dispatch({
          type: 'assetType/fetchTypeAttr',
          payload: {
            type_id: values.type_id,
          },
          callback: () => dispatch(routerRedux.push('/asset/add/confirm')),
        });
      }
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { formItemLayout } = this.props;
    return (
      <div>
        <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
          <Form.Item
            {...formItemLayout}
            label="资产名称"
          >
            {getFieldDecorator('asset_name', {
              rules: [{ type: 'string', required: true, message: '请填写资产名称' }],
            })(
              <Input placeholder="请填写资产名称" />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="资产类型"
          >
            {this.props.loading ? (
              <Spin size="small" style={{ marginLeft: 8 }} />
            ) :
            getFieldDecorator('type_id', {
              rules: [{ required: true, message: '请选择资产类型' }],
            })(
              <Select placeholder="资产类型">
                {this.props.list.map((item) => {
                  const optVal = `${item.id}`;
                  return (
                    <Option key={item.id} value={optVal} disabled={item.status === 0}>
                      { item.type_name }
                    </Option>
                  );
                })}
              </Select>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="描述"
          >
            {getFieldDecorator('asset_desc')(
              <Input placeholder="资产描述" />
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label="资产位置"
          >
            {getFieldDecorator('location')(
              <Input placeholder="请输入备注信息" />
            )}
          </Form.Item>
          <Form.Item
            wrapperCol={{
              xs: { span: 24, offset: 0 },
              sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
            }}
            label=""
          >
            <Button type="primary" onClick={this.onValidateForm}>
              下一步
            </Button>
          </Form.Item>
        </Form>
        <Divider style={{ margin: '40px 0 24px' }} />
        <div className={styles.desc}>
          <h3>说明</h3>
          <h4>资产录入</h4>
          <p>填写基本的资产信息</p>
          <h4>资产类型</h4>
          <p>资产类型决定资产的属性</p>
        </div>
      </div>
    );
  }
}

